<template>
  <div class="info">
    <div class="info-container">
      <div class="title">信息总览</div>
      <div class="left">起始时间</div>
      <div class="line"></div>
      <div class="right">
        <div class="item">
          <div class="time time-show">
            {{ infoData.subjectTimeVos[0].time }}
          </div>
          <div class="content"></div>
        </div>
        <div class="item">
          <div class="time time-show">
            {{ infoData.subjectTimeVos[1].time }}
          </div>
          <div class="content">
            <div class="header">
              <img src="./assets/tubiao01.png" alt="" class="img" />
              <div class="text">故障详情</div>
            </div>
            <div class="desc">
              创建站:
              {{
                infoData.firstLineName
              }}三相过流动作，开关跳闸，重合不成功。停电台区{{
                infoData.firstLineCount
              }}个，无重要用户。
            </div>
            <div class="desc">
              园沙站:
              {{
                infoData.secondLineName
              }}AB相过流动作，开关跳闸，重合不成功。停电台区{{
                infoData.secondLineCount
              }}个，无重要用户。
            </div>
          </div>
        </div>
        <div class="item" style="margin-bottom: 0">
          <div class="time"></div>
          <div class="content">
            <div class="header">
              <img src="./assets/tubiao02.png" alt="" class="img" />
              <div class="text">演练详细步骤</div>
            </div>
          </div>
        </div>
        <div
          class="item"
          v-for="(item, index) in kemu"
          :key="index"
          style="margin-bottom: 0"
        >
          <div
            class="time"
            style="margin-top: 0"
            :class="{ 'time-show': item.title.includes('科目') }"
          >
            {{ infoData.subjectTimeVos[index + 2].time }}
          </div>
          <div class="content">
            <div class="desc">{{ item.title }}</div>
            <div class="desc" v-for="(desc, iindex) in item.desc" :key="iindex">
              {{ desc.trim().replace(/\*\*/g, "") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="back" @click="goHome"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSubjectTimeAndLineInfo } from "@/api/api.js";
const route = useRoute();
const router = useRouter();
const type = ref(route.query.type);
const chuang = ref(route.query.chuang);
const yuan = ref(route.query.yuan);
const goHome = () => {
  router.push({
    path: "/home",
    query: {
      type: type.value,
      chuang: chuang.value,
      yuan: yuan.value,
    },
  });
};
const infoData = ref({
  firstLineCount: "25",
  firstLineName: "创4潘石",
  secondLineCount: "2",
  secondLineName: "园7园沙泵闸甲",
  subjectTimeVos: [
    {
      subjectIndex: 0,
      time: "14:23",
    },
    {
      subjectIndex: 1,
      time: "14:28",
    },
    {
      subjectIndex: 2,
      time: "14:38",
    },
    {
      subjectIndex: 3,
      time: "14:43",
    },
    {
      subjectIndex: 4,
      time: "14:48",
    },
    {
      subjectIndex: 5,
      time: "14:53",
    },
    {
      subjectIndex: 6,
      time: "14:53",
    },
  ],
});
const getSubjectTimeAndLineInfoFn = async () => {
  const data = await getSubjectTimeAndLineInfo();
  infoData.value = data.data;
  console.log(data, "信息总览数据");
};
onMounted(() => {
  getSubjectTimeAndLineInfoFn();
});
const kemu = ref([
  {
    title: "科目2（重要用户失电）：",
    desc: [
      "演练主题：重要用户内部故障导致全站失电应急处置",
      "参与单位：调控中心、大客户班、带电班（发电车）、重要用户（青草沙水库）",
      "【场景1：故障发生与信息报送】",
      "场景描述：",
      "- 智慧保电系统监测到10kV进线柜局部放电超标（后台显示放电量>50pC），触发系统告警。",
      "- 30秒后，进线柜绝缘击穿，用户变电站一路失电，柴油发电机启动，但无法保障所有泵闸用电，关键负载（输水泵闸）仅能支撑30分钟",
      "演练动作：",
      "1. 用户值班电工：",
      '- 查看保电系统告警记录："09:00:23，10kV青草沙甲进线柜A相局部放电告警，09:00:48，过流保护动作跳闸。" ',
      '- 立即电话上报高压监察："我站保电系统监测到进线柜放电故障，现青草沙甲停电，目前处于泵闸输送水关键期，自备电源仅能维持30分钟，请求支援！" ',
      "2. 高压监察： ",
      "- 调取该用户实时负荷曲线（大屏幕显示停电前负荷2000kW突降至0），确认故障范围。  ",
      "- 启动三级应急响应，同步通知：",
      "- **应急发电车**（10kV中压发电车） ",
      '- 向上级报备："青草沙水库因内部设备故障停电，已启动保电预案。" ',
      "【场景2：高压监察现场诊断】",
      "关键操作:",
      "1. **故障定位**：  ",
      "- 使用超声波局放检测仪扫描进线柜，定位A相电缆终端放电点（模拟数值：65dB）。",
      "- 红外测温显示故障点温度达120℃（正常相为45℃）。  ",
      "2. **隔离决策**：",
      '- 高压监察班长："故障原因为电缆头制作工艺缺陷，需立即隔离10kV I段母线，建议优先通过发电车接入保障输水泵闸负荷。"',
      '- 高压监察："汇报调度，二级重要用户青草沙甲进线故障需进行抢修，申请上级线路配合停电。 " ',
      "3. **用户配合**：  ",
      '- 电工断开进线开关并上锁，悬挂"故障待修"标识牌。  ',
      "**【场景3：发电车接入】** ",
      "**关键操作**：",
      " 使用10kV发电车临时接带 I段母线（需核相、保护定值调整模拟）。",
      "**关键台词**： ",
      '- 带电班："发电车已并网成功，输出电压10.2kV，频率50.02Hz，用户 I段母线全部负荷恢复！"  ',
      "**【场景4：故障修复与复盘】**",
      "**核心流程**： ",
      "1. 用户委托有资质单位更换故障电缆头（演练模拟：试验合格报告出具）。 ",
      '2. 高压监察验收："局放量<10pC，耐压试验通过，可以复电。"  ',
      "3.发电车",
      "4. 上级线路合闸送电，恢复主供电源。",
    ],
  },
  {
    title: "科目3（横沙大停电）",
    desc: [
      "事故发现与上报：",
      "横沙因异常导致全岛停电，柴发应急启动。",
      "故障点一：",
      "团结站：团新3V303零流一段保护动作，开关跳闸，重合不成功。长兴站：长新3V311零流一段保护动作，开关跳闸，重合不成功。",
      "区域：",
      "新民站、红星站、横沙柴发",
      "涉及班组：",
      "变电运维一班",
    ],
  },
  {
    title: "科目4（居民失电）：",
    desc: [
      "模拟场景：大跨越双回路发生外破，横沙岛全停。用户报修电话一个接一个，其中有一户居民报家里老人用呼吸机，长停电时间将有生命危险。供电服务二班收到承讯班信息后，立即组织抢修驻点人员，紧急为该户居民家提供移动电源，确保呼吸机在停电期间正常用电。在线路恢复供电后，撤回移动电源。",
    ],
  },
  {
    title: "科目5（施工撤离）：",
    desc: [
      "重点任务：施工现场人员撤离、孔洞封堵、围栏加固等安全措施布置",
      "主要步骤：",
      "1、办公室发出应急响应指令。",
      "2、建设部向施工现场发出撤离指令。",
      "3、施工现场人员有序撤离、对现场做好相关安全防护措施。",
      "4、施工单位现场负责人汇报撤离情况。",
      "区域：",
      "施工现场",
      "涉及班组：",
      "建设部项管组、施工单位、施工班组",
    ],
  },
  {
    title: "科目6（应急排涝）",
    desc: [
      "重点任务：厂区地下车库内涝，启用应急排涝泵进行应急处理。",
      "主要步骤：",
      "1、应急指挥中心发出排涝泵准备指令。",
      "2、安监部向应急基干队伍发出应急处置指令。",
      "3、应急基干队伍集结，前往排涝泵存放点，检查应急排涝泵，外体外观坏、连接部件、电气线路，以及观察试运行状态。",
      "4、应急基干队伍专用车辆将排涝泵运送至预定排涝区域，固定排涝泵位置，连接水带，启动设备。",
      "5.指挥中心下达抽水指令。",
      "6.队伍成员启动排涝泵，观察排水流量和压力，对排涝区域周边进行巡视，查看是否有漏水、积水倒灌等情况。",
      "7.队伍成员定时向指挥中心汇报排涝进展，直至积水排净。",
      "8.队伍成员定向指挥中心汇报排涝结束，指挥中心下达演练结束指令。",
      "区域：",
      "厂区地下车库",
      "涉及班组：",
      "安监部",
      "应急基干队伍",
    ],
  },
]);
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.info {
  width: 1920px;
  height: 1080px;
  position: relative;
  .info-container {
    position: absolute;
    top: 46%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    width: 1715px;
    height: 680px;
    background: url(./assets/beijing03.png) no-repeat top center / 100%;
    padding: 90px 0 20px 70px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .left {
      color: #fff;
      margin-right: 25px;
      margin-top: 5px;
      width: 120px;
      text-align: right;
    }
    .line {
      width: 1px;
      height: 100%;
      background: #0bb7ff;
    }
    .right {
      flex: 1;
      color: #fff;
      height: 100%;
      overflow-y: scroll;
      overflow-x: scroll;
      position: relative;
      left: -10px;
      padding-right: 10px;
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 30px;
        &:first-child {
          margin-bottom: 10px;
          .time {
            margin-top: 0;
          }
        }
        .time {
          padding: 5px 10px;
          border-radius: 5px;
          margin-right: 10px;
          margin-top: 8px;
          width: 62px;
          height: 34px;
          &.time-show {
            background-color: rgba(11, 183, 255, 0.6);
          }
        }
        .content {
          .header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 5px;
          }
          .text {
            font-size: 26px;
            font-weight: bold;
            font-family: DINPro;
            background: linear-gradient(
              180deg,
              #ffffff 0%,
              #ffffff 22%,
              #0bb7ff 82%,
              #0bb7ff 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
          .desc {
            // color: rgba(255, 255, 255, 0.6);
            color: #9fbcdf;
            font-size: 20px;
            line-height: 34px;
            min-height: 34px;
          }
        }
        .img {
          width: 50px;
          height: 50px;
          margin-right: 5px;
        }
      }
      /* 滚动条整体部分 */
      &::-webkit-scrollbar {
        height: 4px;
        width: 4px;
      }
      /* 滚动条里面的滑块 */
      &::-webkit-scrollbar-thumb {
        background-color: rgba(234, 254, 255, 1);
        border-radius: 20px;
      }
    }
    .title {
      position: absolute;
      left: 35px;
      top: 14px;
      color: #fff;
      font-size: 32px;
    }
  }
  .back {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    width: 210px;
    height: 75px;
    cursor: pointer;
    background: url(./assets/anniu02.png) no-repeat top center / 100%;
  }
}
</style>
